<!--管理员用户界面-->
<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { useAdminStore } from '../../store/admin'
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElDialog,
  ElMessage,
  ElPagination,
  ElSwitch,
  ElRow,
  ElCol,
  ElMessageBox
} from 'element-plus'

const adminStore = useAdminStore()

const users = ref([])
const loading = ref(false)
const createUserDialogVisible = ref(false)
const editUserDialogVisible = ref(false)
const userDetailsDialogVisible = ref(false)
const resetPasswordDialogVisible = ref(false)
const passwordVisible = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 筛选条件
const filterForm = reactive({
  role: '',
  username: ''
})

// 表单数据
const createForm = reactive({
  // id: null,
  username: '',
  email: '',
  phone: '',
  role: null,
  status: 1  // 默认启用状态
})

const editForm = reactive({
  id: null, // 用户ID（user.id）
  username: '',
  email: '',
  phone: '',
  role: '',
  status: 1,
  // 学生字段
  studentNumber: '',
  name: '',
  gender: 1,
  birthDate: '',
  major: '',
  grade: '',
  className: '',
  avatar: '',
  resume: '',
  // 教师字段
  teacherNumber: '',
  title: '',
  department: '',
  // 企业字段
  unifiedCode: '',
  legalPerson: '',
  registeredCapital: null,
  establishmentDate: '',
  businessScope: '',
  address: '',
  contactPerson: '',
  contactPhone: '',
  contactEmail: '',
  website: '',
  introduction: '',
  logo: ''
})

const userDetails = reactive({
  user: {},
  detail: {}
})

const passwordForm = reactive({
  id: null,
  newPassword: ''
})

const createFormRef = ref()
const editFormRef = ref()
const passwordFormRef = ref()

// 验证规则
const createRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const editRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }]
}

const passwordRules = {
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
}

// 按ID升序排列用户列表
const sortedUsers = computed(() => {
  return [...users.value].sort((a, b) => {
    // 使用 Number() 确保按数值大小排序
    return Number(a.id) - Number(b.id);
  });
})

// 分页查询用户
const fetchUsers = async (page = 1) => {
  loading.value = true
  try {
    const params = {
      page: page - 1,
      size: pageSize.value
    }

    // 添加筛选条件
    if (filterForm.role) {
      params.role = filterForm.role
    }
    if (filterForm.username) {
      params.username = filterForm.username
    }

    const response = await adminStore.fetchUsers(params)
    users.value = response.content
    total.value = response.totalElements
    currentPage.value = page
  } catch (error) {
    ElMessage.error('获取用户列表失败')
  } finally {
    loading.value = false
  }
}

// 重置筛选条件
const resetFilter = () => {
  filterForm.role = ''
  filterForm.username = ''
  fetchUsers()
}

// 创建用户
const createUser = async () => {
  if (!createFormRef.value) return

  await createFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 构造正确的用户数据对象
        const userData = {
          username: createForm.username,
          email: createForm.email,
          phone: createForm.phone,
          role: parseInt(createForm.role), // 确保 role 是整数
          status: parseInt(createForm.status) // 确保 status 是整数
        }

        await adminStore.createUser(userData)
        ElMessage.success('创建用户成功')
        createUserDialogVisible.value = false
        resetCreateForm()
        await fetchUsers(currentPage.value) // 刷新当前页数据
      } catch (error) {
        console.error('创建用户失败:', error)
        ElMessage.error('创建用户失败: ' + (error.message || '未知错误'))
      }
    }
  })
}

// 显示编辑用户对话框
const showEditUserDialog = async (user) => {
  try {
    // 获取用户详细信息
    const detail = await adminStore.getUserDetail(user.id)
    // 保存user表的ID
    const userId = user.id
    // 先合并user信息
    Object.assign(editForm, detail.user)
    // 再合并detail信息，但保留userId
    Object.assign(editForm, detail.detail)
    editForm.id = userId  // 确保使用user表的ID
    editUserDialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取用户详情失败: ' + (error.message || ''))
  }
}


// 更新用户
const updateUser = async () => {
  if (!editFormRef.value) return

  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 使用editForm.id（即user.id）作为userId参数
        const userId = editForm.id  // 这里应该使用user表的ID

        // 根据用户角色调用不同的更新接口
        if (editForm.role === 'STUDENT') {
          // 更新学生信息
          const studentData = {
            studentNumber: editForm.studentNumber,
            name: editForm.name,
            gender: editForm.gender,
            birthDate: editForm.birthDate,
            major: editForm.major,
            grade: editForm.grade,
            className: editForm.className,
            avatar: editForm.avatar,
            resume: editForm.resume,
            phone: editForm.phone,
            email: editForm.email
          }
          await adminStore.updateStudent(userId, studentData)  // 使用user.id
        } else if (editForm.role === 'TEACHER') {
          // 更新教师信息
          const teacherData = {
            teacherNumber: editForm.teacherNumber,
            name: editForm.name,
            gender: editForm.gender,
            title: editForm.title,
            department: editForm.department,
            avatar: editForm.avatar,
            phone: editForm.phone,
            email: editForm.email
          }
          await adminStore.updateTeacher(userId, teacherData)  // 使用user.id
        } else if (editForm.role === 'COMPANY') {
          // 更新企业信息
          const companyData = {
            name: editForm.name,
            unifiedCode: editForm.unifiedCode,
            legalPerson: editForm.legalPerson,
            registeredCapital: editForm.registeredCapital,
            establishmentDate: editForm.establishmentDate,
            businessScope: editForm.businessScope,
            address: editForm.address,
            contactPerson: editForm.contactPerson,
            contactPhone: editForm.contactPhone,
            contactEmail: editForm.contactEmail,
            website: editForm.website,
            introduction: editForm.introduction,
            logo: editForm.logo
          }
          await adminStore.updateCompany(userId, companyData)  // 使用user.id
        } else {
          // 更新普通用户信息（管理员等）
          const userData = {
            username: editForm.username,
            email: editForm.email,
            phone: editForm.phone,
            role: editForm.role,
            status: editForm.status
          }
          await adminStore.updateUser(userId, userData)  // 使用user.id
        }

        ElMessage.success('更新用户成功')
        editUserDialogVisible.value = false
        await fetchUsers() // 重新获取用户列表以更新表格数据
      } catch (error) {
        ElMessage.error('更新用户失败: ' + (error.message || ''))
      }
    }
  })
}


// 显示用户详情
const showUserDetails = async (user) => {
  try {
    const detail = await adminStore.getUserDetail(user.id)
    Object.assign(userDetails, detail)
    userDetailsDialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取用户详情失败')
  }
}

// 删除用户
const deleteUser = async (userId) => {
  // 添加确认对话框
  try {
    await ElMessageBox.confirm('确定要删除该用户吗？此操作不可恢复。', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    // 用户确认删除后执行删除操作
    await adminStore.deleteUser(userId)
    ElMessage.success('删除用户成功')
    await fetchUsers() // 刷新用户列表
  } catch (error) {
    // 用户取消删除或删除失败
    if (error !== 'cancel') {
      ElMessage.error('删除用户失败: ' + (error.message || ''))
    }
  }
}

// 切换用户状态
const toggleUserStatus = async (userId, status) => {
  console.log('准备调用切换用户状态接口:', {
    userId: userId,
    currentStatus: status,
    url: `/api/admin/users/${userId}/toggle-status`
  });

  // 先保存原始状态用于提示信息和回滚
  const user = users.value.find(u => u.id === userId)
  const originalStatus = user ? user.status : status

  try {
    // 调用新的toggle-status接口
    const result = await adminStore.toggleUserStatus(userId)
    console.log('切换用户状态成功:', {
      userId: userId,
      result: result
    });

    // 正确的提示信息：基于操作前的状态显示
    ElMessage.success(`${originalStatus === 1 ? '启用' : '禁用'}用户成功`)
  } catch (error) {
    console.error('切换用户状态失败:', {
      userId: userId,
      error: error.message || error
    });

    ElMessage.error(`${originalStatus === 1 ? '禁用' : '启用'}用户失败: ${error.message || ''}`)
    // 恢复开关状态
    if (user) {
      user.status = originalStatus
    }
  }
}


// 显示重置密码对话框
const showResetPasswordDialog = (userId) => {
  passwordForm.id = userId
  passwordForm.newPassword = '123456'
  resetPasswordDialogVisible.value = true
}

// 重置用户密码
const resetUserPassword = async () => {
  if (!passwordFormRef.value) return

  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await adminStore.resetUserPassword(passwordForm.id, { newPassword: passwordForm.newPassword })
        ElMessage.success('重置密码成功')
        resetPasswordDialogVisible.value = false
        // 重新获取用户列表以确保数据同步
        await fetchUsers()
      } catch (error) {
        ElMessage.error('重置密码失败: ' + (error.message || ''))
      }
    }
  })
}

// 重置创建表单
const resetCreateForm = () => {
  createForm.username = ''
  createForm.email = ''
  createForm.phone = ''
  createForm.role = null
  createForm.status = 1
}

onMounted(() => {
  fetchUsers()
})
</script>

<template>
  <!-- 模板部分保持不变 -->
  <div class="user-management">
    <div class="header">
      <div class="header-left">
        <el-button @click="$router.back()" icon="ArrowLeft">返回</el-button>
        </div>
      <h2>用户管理</h2>
      <el-button type="primary" @click="createUserDialogVisible = true">创建用户</el-button>
    </div>

    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
            v-model="filterForm.username"
            placeholder="请输入用户名"
            clearable
          />
        </el-col>
        <el-col :span="6">
          <el-select
            v-model="filterForm.role"
            placeholder="请选择角色"
            clearable
            style="width: 100%"
          >
            <el-option label="学生" value="STUDENT" />
            <el-option label="教师" value="TEACHER" />
            <el-option label="企业" value="COMPANY" />
            <el-option label="管理员" value="ADMIN" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="fetchUsers(1)">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-table
      :data="sortedUsers"
      v-loading="loading"
      style="width: 100%; margin-top: 20px;"
      :table-layout="'auto'"
    >
      <el-table-column prop="id" label="ID" width="100" sortable />
      <el-table-column prop="username" label="用户名" min-width="150" />
      <el-table-column prop="email" label="邮箱" min-width="200" />
      <!-- 在邮箱列后添加 realName 列 -->
      <el-table-column prop="realName" label="真实姓名/企业名称" min-width="150" />
      <el-table-column prop="phone" label="手机号" min-width="150" />
      <el-table-column prop="role" label="角色" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.role === 'ADMIN'">管理员</el-tag>
          <el-tag v-else-if="scope.row.role === 'STUDENT'" type="success">学生</el-tag>
          <el-tag v-else-if="scope.row.role === 'TEACHER'" type="warning">教师</el-tag>
          <el-tag v-else-if="scope.row.role === 'COMPANY'" type="info">企业</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="toggleUserStatus(scope.row.id, $event)"
            :disabled="scope.row.role === 'ADMIN'"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="showUserDetails(scope.row)">详情</el-button>
          <el-button size="small" @click="showEditUserDialog(scope.row)">编辑</el-button>
          <el-button
            size="small"
            type="warning"
            @click="showResetPasswordDialog(scope.row.id)"
          >
            重置密码
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="deleteUser(scope.row.id)"
            :disabled="scope.row.role === 'ADMIN'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="fetchUsers"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      style="margin-top: 20px; text-align: right;"
    />

    <!-- 创建用户对话框 -->
    <el-dialog v-model="createUserDialogVisible" title="创建用户" width="500px">
      <el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="80px">
<!--        <el-form-item label="ID" prop="id">-->
<!--          <el-input v-model.number="createForm.id" placeholder="可选，系统会自动生成" />-->
<!--        </el-form-item>-->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="createForm.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="createForm.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="createForm.phone" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="createForm.role" placeholder="请选择角色" style="width: 100%">
            <el-option label="学生" :value="0" />
            <el-option label="教师" :value="1" />
            <el-option label="企业" :value="2" />
            <el-option label="管理员" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="createForm.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="禁用" :value="0" />
            <el-option label="启用" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="createUserDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createUser">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <!-- 编辑用户对话框 -->
    <el-dialog v-model="editUserDialogVisible" title="编辑用户" width="600px">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="editForm.role" style="width: 100%" disabled>
            <el-option label="学生" value="STUDENT" />
            <el-option label="教师" value="TEACHER" />
            <el-option label="企业" value="COMPANY" />
            <el-option label="管理员" value="ADMIN" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="editForm.status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

        <!-- 学生详情 -->
        <template v-if="editForm.role === 'STUDENT'">
          <el-form-item label="学号">
            <el-input v-model="editForm.studentNumber" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="editForm.gender" style="width: 100%">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-input v-model="editForm.birthDate" placeholder="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="editForm.major" />
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="editForm.grade" />
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="editForm.className" />
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="editForm.avatar" />
          </el-form-item>
          <el-form-item label="简历">
            <el-input v-model="editForm.resume" type="textarea" />
          </el-form-item>
        </template>

        <!-- 教师详情 -->
        <template v-else-if="editForm.role === 'TEACHER'">
          <el-form-item label="工号">
            <el-input v-model="editForm.teacherNumber" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="editForm.gender" style="width: 100%">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-input v-model="editForm.title" />
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="editForm.department" />
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="editForm.avatar" />
          </el-form-item>
        </template>

        <!-- 企业详情 -->
        <template v-else-if="editForm.role === 'COMPANY'">
          <el-form-item label="企业名称">
            <el-input v-model="editForm.name" />
          </el-form-item>
          <el-form-item label="统一信用代码">
            <el-input v-model="editForm.unifiedCode" />
          </el-form-item>
          <el-form-item label="法人代表">
            <el-input v-model="editForm.legalPerson" />
          </el-form-item>
          <el-form-item label="注册资本">
            <el-input v-model.number="editForm.registeredCapital" />
          </el-form-item>
          <el-form-item label="成立日期">
            <el-input v-model="editForm.establishmentDate" placeholder="YYYY-MM-DD" />
          </el-form-item>
          <el-form-item label="经营范围">
            <el-input v-model="editForm.businessScope" type="textarea" />
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="editForm.address" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="editForm.contactPerson" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="editForm.contactPhone" />
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="editForm.contactEmail" />
          </el-form-item>
          <el-form-item label="企业官网">
            <el-input v-model="editForm.website" />
          </el-form-item>
          <el-form-item label="企业简介">
            <el-input v-model="editForm.introduction" type="textarea" />
          </el-form-item>
          <el-form-item label="Logo">
            <el-input v-model="editForm.logo" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateUser">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户详情对话框 -->
    <el-dialog v-model="userDetailsDialogVisible" title="用户详情" width="600px">
      <el-form label-width="120px" disabled>
        <!-- 基本用户信息 -->
        <el-form-item label="用户ID">
          <el-input v-model="userDetails.user.id" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userDetails.user.username" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userDetails.user.email" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userDetails.user.phone" />
        </el-form-item>
        <el-form-item label="角色">
          <el-input :value="userDetails.user.role === 'ADMIN' ? '管理员' :
                          userDetails.user.role === 'STUDENT' ? '学生' :
                          userDetails.user.role === 'TEACHER' ? '教师' : '企业'" />
        </el-form-item>
        <el-form-item label="状态">
          <el-input :value="userDetails.user.status === 1 ? '正常' : '禁用'" />
        </el-form-item>

        <!-- 根据角色显示详细信息 -->
        <!-- 学生详情 -->
        <template v-if="userDetails.user.role === 'STUDENT' && userDetails.detail">
          <el-form-item label="学号">
            <el-input v-model="userDetails.detail.studentNumber" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="userDetails.detail.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input :value="userDetails.detail.gender === 1 ? '男' :
                             userDetails.detail.gender === 2 ? '女' : ''" />
          </el-form-item>
          <el-form-item label="出生日期">
            <el-input v-model="userDetails.detail.birthDate" />
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="userDetails.detail.major" />
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="userDetails.detail.grade" />
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="userDetails.detail.className" />
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="userDetails.detail.avatar" />
          </el-form-item>
          <el-form-item label="简历">
            <el-input v-model="userDetails.detail.resume" type="textarea" />
          </el-form-item>
        </template>

        <!-- 教师详情 -->
        <template v-else-if="userDetails.user.role === 'TEACHER' && userDetails.detail">
          <el-form-item label="工号">
            <el-input v-model="userDetails.detail.teacherNumber" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="userDetails.detail.name" />
          </el-form-item>
          <el-form-item label="性别">
            <el-input :value="userDetails.detail.gender === 1 ? '男' :
                             userDetails.detail.gender === 2 ? '女' : ''" />
          </el-form-item>
          <el-form-item label="职称">
            <el-input v-model="userDetails.detail.title" />
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="userDetails.detail.department" />
          </el-form-item>
          <el-form-item label="头像">
            <el-input v-model="userDetails.detail.avatar" />
          </el-form-item>
        </template>

        <!-- 企业详情 -->
        <template v-else-if="userDetails.user.role === 'COMPANY' && userDetails.detail">
          <el-form-item label="企业名称">
            <el-input v-model="userDetails.detail.name" />
          </el-form-item>
          <el-form-item label="统一信用代码">
            <el-input v-model="userDetails.detail.unifiedCode" />
          </el-form-item>
          <el-form-item label="法人代表">
            <el-input v-model="userDetails.detail.legalPerson" />
          </el-form-item>
          <el-form-item label="注册资本">
            <el-input :value="userDetails.detail.registeredCapital ?
                             '¥' + userDetails.detail.registeredCapital.toFixed(2) : ''" />
          </el-form-item>
          <el-form-item label="成立日期">
            <el-input v-model="userDetails.detail.establishmentDate" />
          </el-form-item>
          <el-form-item label="经营范围">
            <el-input v-model="userDetails.detail.businessScope" type="textarea" />
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="userDetails.detail.address" />
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="userDetails.detail.contactPerson" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="userDetails.detail.contactPhone" />
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="userDetails.detail.contactEmail" />
          </el-form-item>
          <el-form-item label="企业官网">
            <el-input v-model="userDetails.detail.website" />
          </el-form-item>
          <el-form-item label="企业简介">
            <el-input v-model="userDetails.detail.introduction" type="textarea" />
          </el-form-item>
          <el-form-item label="Logo">
            <el-input v-model="userDetails.detail.logo" />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userDetailsDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 重置密码对话框 -->
    <el-dialog v-model="resetPasswordDialogVisible" title="重置密码" width="500px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="80px">
        <el-form-item label="新密码">
          <el-input
              v-model="passwordForm.newPassword"
              type="text"
              disabled
          />
          <div style="color: #999; font-size: 12px; margin-top: 5px;">
            密码已固定为: 123456
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="resetUserPassword">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.user-management {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}
.filter-card {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
